<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id='app'>
        <form class="am-form2">
            <el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-button type="primary" @click='add'>添加</el-button>
            <p>{{value6}}</p>
            <el-form ref="form" :model="form" label-width="80px">
                <el-row :gutter="20">
                    <div v-for='item in list'>
                        <el-col :span="12">
                            <!-- <el-form-item label="">
                        </el-form-item> -->
                            <el-input placeholder="v-model" v-model="item.name" class="input-with-select">
                                <el-select v-model="item.type" slot="append" placeholder="请选择" style='width: 150px;'>
                                    <el-option :label="type" :value="index+1" v-for='(type,index) in types'></el-option>
                                </el-select>
                            </el-input>
                        </el-col>
                        <el-col :span='12' v-if='item.type == 5'>
                            <el-tag :key="tag" v-for="tag in item.selections" closable :disable-transitions="false" @close="handleClose(tag,item)">
                                {{tag}}
                            </el-tag>
                            <el-input class="input-new-tag" v-model="item.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(item)" @blur="handleInputConfirm(item)" style='width: 90px;'>
                            </el-input>
                            <el-input  v-model="item.selectionsName" style='width: 90px;' placeholder='选项名称'>
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-input v-model="item.listName" v-if='item.type == 4'></el-input>
                            <el-input v-model="item.name" v-if='item.type == 9'></el-input>
                        </el-col>
                    </div>
                </el-row>
            </el-form>
        </form>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <link href="https://cdn.bootcss.com/layer/2.3/skin/layer.css" rel="stylesheet">
    <script src="utils.js"></script>
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                inputVisible: false,
                inputValue: '',
                types: ['文本', '数字', '地址', '选择', '多选', '单选', '时间', '日期', '时间段'],
                value6: '',
                list: [{
                    name: '',
                    type: 2,
                    selections: ['选项1', '选项2']
                }],
                form: {
                    title: '',
                    "name": '',
                    "conversations": [],
                    "delay": 0,
                    isAutoGo: false,
                    "toScene": [],
                    "defaultWord": "",
                    "autoScene": "a"
                },
                tableData: []
            }
        },
        mounted: function() {},
        methods: {
            handleClose(tag,item) {
                item.selections.splice(item.selections.indexOf(tag), 1);
            },

            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    // this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            handleInputConfirm(item) {
                let inputValue = item.inputValue;
                if (inputValue) {
                    item.selections.push(inputValue);
                    item.inputValue = ''
                }
                this.inputVisible = false;
                this.inputValue = '';
            },
            addSelection(item) {
                item.selections.push('数据')
            },
            add() {
                this.list.push({
                    name: '',
                    type: 1
                })
            },
            removeReply(index) {
                this.form.toScene.splice(index, 1);
            },
            addConversation() {
                this.form.conversations.push('');
            },
            removeConversations(index) {
                this.form.conversations.splice(index, 1);
            },
            onPageChange(val) {},
            onSubmit() {
                console.log(this.form)
                if (this.form.name == '') {
                    msg('没填写场景编号')
                    return;
                }
                if (this.form.autoScene == '') {
                    this.form.isAutoGo = false
                } else {}
                var param = {
                    json: JSON.stringify(this.form),
                    title: this.form.title,
                    name: this.form.name
                }
                axiosRequest(param, '/story/submit', "/story/list")
            }
        },
        filters: {
            fmt(date) {
                return date
            }
        }
    })
    </script>
    <script>
    console.log('${items!}')
    // vue.tableData = ${items!};
    </script>
</body>

</html>